<template>
  <div class="member">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);line-height: 3;padding-left: 1em;">
      <el-breadcrumb-item>会员管理</el-breadcrumb-item>
      <el-breadcrumb-item>会员列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="search">
      <el-select v-model="value" placeholder="活动名称">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-date-picker v-model="valued1" align="right" type="date" placeholder="开始日期">
      </el-date-picker>
      <el-date-picker v-model="valued2" align="right" type="date" placeholder="结束日期">
      </el-date-picker>
      <el-button type="primary">搜索</el-button>
      <el-button type="primary" plain>导入通讯录</el-button>
    </div>
    <div class="list-bs">
      <el-table :data="tableData" height="16.6667rem" border style="width: 100%;">
        <el-table-column prop="id" label="ID" width="100">
        </el-table-column>
        <el-table-column prop="a" label="手机号" width="130">
        </el-table-column>
        <el-table-column prop="name" label="会员名称" width="180">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="grouping" label="会员分组" width="150">
        </el-table-column>
        <el-table-column prop="type" label="会员类型" width="150">
        </el-table-column>
        <el-table-column prop="check_in" label="入住方式" width="150">
        </el-table-column>
         <el-table-column prop="integral" label="店铺积分" width="100">
        </el-table-column>
        <el-table-column prop="sdate" label="操作">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <ul class="flex">
                <li @click="handleEdit(scope.$index, scope.row)">详细</li>
                <li>销分</li>
                <li>换优惠</li>
              </ul>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pages">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="12">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        a: 1,
        currentPage4: 1,
        valued1: '',
        valued2: '',
        value1: '',
        value2: '',
        options: [{
          // value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',
        tableData: [{
          id: '10001',
          a: '13188888888',
          type:'我的会员',
          date: '2016-05-03',
          name: 'Chen Ping',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '10002',
          a: '2',
          type:'联盟会员',
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '10003',
          a: '3',
          grouping:'VIP',
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '10004',
          date: '2016-05-01',
          name: '王小虎',
          a: '4',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '10005',
          a: '2',
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '10006',
          a: '3',
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '10007',
          a: '4',
          check_in:'平台搜劵',
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, , {
          id: '10006',
          a: '3',
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '10007',
          a: '4',
          date: '2016-05-07',
          name: '王小虎',
          integral:'10',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '10006',
          a: '3',
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '10007',
          a: '4',
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '10006',
          a: '3',
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '10007',
          a: '4',
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        // pickerOptions: {
        //   disabledDate(time) {
        //     return time.getTime() > Date.now();
        //   }
        // },
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      found() {
        this.$router.push({
          path: '/found'
        })
      }
    },
  }
</script>

<style scoped>
.pages {
    text-align: center;
    padding-top: .9091rem;
  }

  .header_fd {
    padding: .4rem 0;
  }
  .search{
    padding: .4rem 0;
  }
  .flex li {
    margin-right: 10px;
    cursor: pointer
  }
</style>
